<template>
  <view class="container">
    <!-- 顶部个人信息区 -->
    <uni-nav-bar :border="false" class="custom-nav-bar">
	
      <view class="user-info" @click="navigateToResume">
        <image src="/static/mine.png" class="avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-name">{{formData.name}}</text>
          <text class="user-title">{{formData.jobTarget}}</text>
        </view>
        <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
      </view>
    </uni-nav-bar>

    <!-- 手动实现的标签页切换 -->
    <view class="tab-container">
      <view class="tab-item" :class="{ 'active': activeTab === 0 }" @click="onTabClick(0)">
        <text class="tab-text">推荐岗位</text>
        <view class="tab-indicator" :class="{ 'show': activeTab === 0 }"></view>
      </view>
      <view class="tab-item" :class="{ 'active': activeTab === 1 }" @click="onTabClick(1)">
        <text class="tab-text">数据分析</text>
        <view class="tab-indicator" :class="{ 'show': activeTab === 1 }"></view>
      </view>
    </view>

    <!-- 标签页内容 -->
    <view class="tab-content">
      <!-- 推荐岗位 -->
      <view v-if="activeTab === 0" class="jobs-container">
        <view v-if="loading" class="loading-container">
          <uni-loading size="large"></uni-loading>
          <text class="loading-text">正在加载推荐岗位...</text>
        </view>
        <view v-else-if="recommendedJobs.result == null" class="no-data">
          <image src="/static/empty.png" class="empty-icon"></image>
          <text class="no-data-text">暂无推荐岗位，请先完善简历，并开启数据分析</text>
          <button class="resume-btn" type="primary" @click="navigateToResume">完善简历</button>
        </view>
        <view v-else>
			
          <uni-card v-for="(job, index) in recommendedJobs.result" :key="index" :border="false" class="job-card">
          <view class="job-header">
            <view class="job-title-salary">
              <text class="job-title">{{ job.jobName }}</text>
            </view>
          </view>
          <view class="job-reason">
            <view class="reason-title">推荐理由</view>
            <view class="reason-content">{{ job.reason }}</view>
          </view>
         
        </uni-card>
		 <button class="apply-btn" type="primary" size="mini" @click="showHonorHelp">查看原始数据</button>
      </view>
    </view>

      <!-- 个人数据分析 -->
      <view v-else class="analysis-container">
		<uni-section  title="能力分析" type="line" class="analysis-section"
		>
		          <view class="skill-chart">
		            <view v-for="(skill, index) in  analysisData.result" :key="index" class="skill-item">
		              <view class="skill-name">{{ skill.title }}</view>
		              <view class="skill-bar">
		                <view class="skill-progress" :style="{ width: skill.score + '%' }"></view>
		              </view>
		              <view class="skill-level">{{ skill.score }}%</view>
		            </view>
		          </view>
		</uni-section>
		<!-- <uni-section title="技能分析" type="line" class="analysis-section">
		  <view class="skill-chart">
		    <view v-for="(skill, index) in skillsData" :key="index" class="skill-item">
		      <view class="skill-name">{{ skill.name }}</view>
		      <view class="skill-bar">
		        <view class="skill-progress" :style="{ width: skill.level + '%' }"></view>
		      </view>
		      <view class="skill-level">{{ skill.level }}%</view>
		    </view>
		  </view>
		      
		</uni-section>
		
		<uni-section title="求职竞争力" type="line" class="analysis-section">
		  <view class="competitiveness-chart">
		    <image src="/static/rank-2.png" class="rank-icon"></image>
		    <view class="competitiveness-text">
		      <text class="rank-title">超越了85%的竞争者</text>
		      <text class="rank-subtitle">在前端开发岗位中</text>
		    </view>
		  </view>
		</uni-section>
		
		<uni-section title="岗位匹配度" type="line" class="analysis-section">
		  <view class="match-list">
		    <view v-for="(match, index) in matchData" :key="index" class="match-item">
		      <view class="match-name">{{ match.name }}</view>
		      <view class="match-bar">
		        <view class="match-progress" :style="{ width: match.score + '%' }" :class="getMatchColor(match.score)"></view>
		      </view>
		      <view class="match-score">{{ match.score }}%</view>
		    </view>
		  </view>
		</uni-section> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import {
		ref,
		reactive,
		onMounted
	} from 'vue';
import { http } from '../../../utils/requestUtil';

// import { navigateTo } from '@dcloudio/uni-app';

// 标签页状态
const activeTab = ref(0);

// 推荐岗位数据
const recommendedJobs = ref([])
// 加载状态
const loading = ref(false)
// 技能数据
const analysisData = ref([]);
const honorHelpPopup = ref(null);
const showHonorHelp = () => {
	uni.navigateTo({
		url:"/pages/notes/recommendedPost/originData/originData"
	})
	}

// 切换标签页
const onTabClick = (index) => {
  activeTab.value = index;
};

// 跳转到简历页面
const navigateToResume = () => {
  uni.navigateTo({
    url: '/pages/notes/notes'
  });
};

// 根据匹配度获取颜色
const getMatchColor = (score) => {
  if (score >= 80) return 'high-match';
  if (score >= 60) return 'medium-match';
  return 'low-match';
};

// 开始分析
const startAnalysis = () => {
  uni.showLoading({
    title: '分析中...'
  });
  
  // 这里可以添加调用后端分析接口的代码
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '分析完成',
      icon: 'success'
    });
    // 分析完成后可以刷新数据或跳转到分析结果页
  }, 1500);
};
const formData = ref({
	name:'',
	jobTarget:''
})
const loadData = async () => {
		// http
	
		const res = await http.get('/myresume/getResume')
		console.log(res)
		if (res.msg == "未有简历") {
			return
		}
		formData.value = res.data
	}
onMounted(async()=>{
	// 开始加载
	loading.value = true;
	loadData()
	try {
		const res =await http.get("/trainScript/predict/getInfo")
		// 处理返回的推荐岗位数据
		if (res.data && res.data.result) {
			// 将API返回的数据赋值给推荐岗位数组
			recommendedJobs.value = res.data;
	
		} else {
			recommendedJobs.value = [];
		}
		const res2 =await http.get("/trainScript/record2/getInfo")
		if (res2.data && res2.data.result) {
			// 将API返回的数据赋值给推荐岗位数组
			analysisData.value = res2.data;
			console.log(analysisData.value)
		} else {
			analysisData.value = [];
		}
	} catch (error) {
		console.error('获取推荐岗位数据失败:', error)
		uni.showToast({
			title: '获取推荐岗位数据失败',
			icon: 'error'
		})
		recommendedJobs.value = [];
		analysisData.value = [];
	} finally {
		// 结束加载
		loading.value = false;
	}
})
</script>

<style>
.container {
  padding-bottom: 60rpx;
}

/* 顶部导航栏 */
.custom-nav-bar {
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  width: 100%;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}

.user-title {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 标签页控制 */
.tab-container {
  display: flex;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #f0f7ff;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #007aff;
  font-weight: bold;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 6rpx;
  background-color: #007aff;
  transition: all 0.3s ease;
  border-radius: 3rpx;
}

.tab-indicator.show {
  width: 80rpx;
}

/* 标签页内容 */
.tab-content {
  padding: 0 20rpx;
}

/* 推荐岗位 */
.jobs-container {
  padding-top: 10rpx;
}

.job-card {
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.job-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.job-title-salary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.job-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.job-salary {
  font-size: 30rpx;
  color: #e63946;
  font-weight: bold;
}

.job-company {
  font-size: 26rpx;
  color: #666;
}

.job-info {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #f5f5f5;
}

.job-info text {
  font-size: 24rpx;
  color: #999;
}

.job-reason {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.reason-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.reason-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.job-tags {
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.apply-btn {
  margin: 20rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 30rpx;
}

/* 个人数据分析 */
.analysis-container {
  padding-top: 10rpx;
}

.analysis-section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.skill-chart {
  padding: 20rpx;
}

.skill-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.skill-name {
  width: 160rpx;
  font-size: 26rpx;
  color: #333;
}

.skill-bar {
  flex: 1;
  height: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin: 0 20rpx;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background-color: #007aff;
  border-radius: 10rpx;
}

.skill-level {
  width: 80rpx;
  font-size: 26rpx;
  color: #666;
  text-align: right;
}

.competitiveness-chart {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-icon {
  width: 160rpx;
  height: 160rpx;
  margin-right: 30rpx;
}

.competitiveness-text {
  text-align: center;
}

.rank-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.rank-subtitle {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.match-list {
  padding: 20rpx;
}

.match-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.match-name {
  width: 200rpx;
  font-size: 26rpx;
  color: #333;
}

.match-bar {
  flex: 1;
  height: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin: 0 20rpx;
  overflow: hidden;
}

.match-progress {
  height: 100%;
  border-radius: 10rpx;
}

.high-match {
  background-color: #4cd964;
}

.medium-match {
  background-color: #ffcc00;
}

.low-match {
  background-color: #ff9500;
}

.match-score {
  width: 80rpx;
  font-size: 26rpx;
  color: #666;
  text-align: right;
}

/* 无数据提示 */
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  text-align: center;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.no-data-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.resume-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 30rpx;
  padding: 0 40rpx;
}

/* 分析按钮 */
.analysis-btn {
  margin: 30rpx 20rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 30rpx;
}
</style>
